<template>
  <div>
    <el-tabs v-model="activeKey" @tab-click="handleClick">
      <el-tab-pane label="日汇总" name="1"></el-tab-pane>
      <el-tab-pane label="月汇总" name="2"></el-tab-pane>
    </el-tabs>
    <el-card style="min-width: 1200px">
      <div class="tabWrap"></div>
      <div class="tableSelectWrap">
        <el-form ref="caseAccountForm" :model="commandForm" label-width="100px">
          <el-row>
            <el-col :span="7">
              <el-form-item label="选择时间" prop="date">
                <el-date-picker
                  style="width: 100%"
                  v-model="commandForm.date"
                  :type="activeKey == '1' ? 'month' : 'year'"
                  :value-format="activeKey == '1' ? 'yyyy-MM' : 'yyyy'"
                  :picker-options="pickerOptions"
                  placeholder="选择日期"
                  :clearable="false"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="1">
              <el-form-item label="结算状态" prop="settleStatus">
                <el-select
                  v-model="commandForm.settleStatus"
                  style="width: 100%"
                  placeholder="请选择结算状态"
                >
                  <el-option label="所有" value=""></el-option>
                  <el-option label="未结算" :value="0"></el-option>
                  <el-option label="结算成功" :value="1"></el-option>
                  <el-option label="处理中" :value="2"></el-option>
                  <el-option label="结算失败" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="1">
              <el-form-item label="分账发起方" prop="memberIds">
                <el-select
                  style="width: 100%"
                  v-model="commandForm.outUserId"
                  class="input_"
                  filterable
                  remote
                  clearable
                  placeholder="请输入用户名称或用户ID"
                  :remote-method="remoteMethod"
                  @change="setId($event)"
                  @focus="setId1()"
                >
                  <el-option
                    v-for="item of restaurants"
                    :key="item.id"
                    :label="item.userName"
                    :value="item.id"
                    class="height70"
                  >
                    <div
                      style="
                        color: #999999;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 350px;
                      "
                    >
                      {{ item.userName }} 商户ID :{{ item.userNo }}
                    </div>
                    <!-- <div style="color: #999999">商户ID : {{ item.memberNo }}</div> -->
                  </el-option>
                </el-select>
                <!-- <el-merchant-vue v-model="commandForm.memberIds"></el-merchant-vue> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7" :offset="0" style="min-width: 170px">
              <el-button class="width120" @click="this.resetFields"
                >重置</el-button
              >
              <el-button
                type="primary"
                class="width120"
                @click="
                  () => {
                    this.dataForm = JSON.parse(
                      JSON.stringify(this.commandForm)
                    );
                    this.handleQuery();
                  }
                "
                >查询</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card
      class="textBox"
      style="min-width: 1200px; margin-bottom: -5px; margin-top: 15px"
    >
      <span class="numBox">
        <span>分账订单总额</span>
        <span class="symbol">￥</span>
        <span class="num">{{ info.settleAmountTotal || 0.0 }}</span>
      </span>
      <!-- <span class="numBox">
        <span>分账订单量</span>
        <span class="symbol">￥</span>
        <span class="num">345.32</span>
      </span> -->
      <span class="numBox">
        <span>已结算</span>
        <span class="symbol">￥</span>
        <span class="num">{{ info.haveSettleAmountTotal || 0.0 }}</span>
      </span>
      <span class="numBox">
        <span>未结算</span>
        <span class="symbol">￥</span>
        <span class="num">{{ info.notSettleAmountTotal || 0.0 }}</span>
      </span>
    </el-card>
    <el-card style="margin-top: 20px; min-width: 1200px">
      <div class="switch">
        <div class="switch2">
          <el-switch v-model="isFixedTableH" inactive-text="固定表头">
          </el-switch>
        </div>
        <!-- <el-button @click="handleClick(scope.row)" type="primary"
          >下载月报表</el-button
        > -->
      </div>
      <el-table :data="dataList" :height="fixedTableHeight">
        <template slot="empty">
          <el-empty
            :image="require('@/assets/imgs/middleWork/k1.png')"
            :image-size="80"
            description="暂无相关数据"
          ></el-empty>
        </template>
        <el-table-column
          show-overflow-tooltip
          prop="date"
          align="center"
          label="创建时间"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.date ? scope.row.date : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="orderAmountTotal"
          align="center"
          sortable
          label="订单总额/元"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{
                scope.row.orderAmountTotal ? scope.row.orderAmountTotal : "-"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="settleAmountTotal"
          align="center"
          sortable
          label="分账总额/元"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{
                Number(scope.row.settleAmountTotal)
                  ? scope.row.settleAmountTotal
                  : "0.00"
              }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="feeAmountTotal"
          sortable
          align="center"
          label="手续费/元"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.feeAmountTotal ? scope.row.feeAmountTotal : "0.00" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="act"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.date == newDate">当日报表于次日生成</div>
            <div v-else>
              <div
                v-if="
                  !Number(scope.row.orderAmountTotal) &&
                  !Number(scope.row.settleAmountTotal) &&
                  !Number(scope.row.feeAmountTotal)
                "
              >
                -
              </div>
              <el-button
                v-else
                @click="downFn(scope.row)"
                v-throttle="1000"
                type="primary"
                class="tableBtn"
                >{{ activeKey == "1" ? "下载日报表" : "下载月报表" }}</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import mixin from "@/mixins/mixin";
import { setTabIndex, getTabIndex, getUserInfo } from "@/utils/public";

// import elMerchantVue from "@/components/el-merchant.vue";
export default {
  mixins: [mixin],
  name: "caseAccountCollect",
  components: {
    // elMerchantVue,
  },
  data() {
    return {
      restaurants: [],
      pickerOptions: {
        disabledDate: (time) => {
          return this.checkTime(time);
        },
      },
      newDate: this.$moment(new Date()).format("YYYY-MM-DD"),
      mixinViewModuleOptions: {
        createdIsNeed: false,
      },
      commandForm: {
        memberId: "",
        memberIds: [],
        date: this.$moment().format("YYYY-MM"),
        settleStatus: "",
      },
      activeKey: getTabIndex(),
      dataList: [],
      info: {},
    };
  },
  mounted() {
    this.dataForm = JSON.parse(JSON.stringify(this.commandForm));
    this.handleQuery();
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if (this.$route.name == this.$options.name) {
          this.handleClick();
        }
      },
    },
    deep: true,
  },
  methods: {
    getTabIndex,
    setId(val) {
      //console.log(val);
      this.commandForm.memberIds = [val];
      // let obj = this.restaurants.find((item) => item.memberName == val);
      // this.commandForm.memberIds = [obj.id];
      // console.log(this.commandForm.memberIds);
    },
    setId1() {
      if (this.restaurants.length != 0) {
        this.restaurants = [];
      }
    },
    remoteMethod(query) {
      if (query !== "") {
        this.getMerchantList(query);
      } else {
        this.merchantList = [];
      }
    },
    getMerchantList(val) {
      //console.log(val);
      this.$http
        .get(
          "/api/royalty/getMemberUserByAppIdAndMerchanrId?userName=" +
            val
        )
        .then((res) => {
          if (res.code === "0000") {
            //console.log(res.data);
            this.restaurants = res.data;
          }
        });
    },
    //重置操作
    resetFields() {
      this.resetForm("caseAccountForm");
      this.commandForm = {
        memberId: "",
        memberIds: [],
        date:
          this.activeKey == "1"
            ? this.$moment().format("YYYY-MM")
            : this.$moment().format("YYYY"),
        settleStatus: "",
      };
    },
    checkTime(time) {
      // let t = new Date().getDate();
      // 如果想包含本月本月 - 8.64e7 * t 就不需要了，
      // 如果想之前的不能选择把 > 换成 <
      return time.getTime() > Date.now();
    },
    downFn(row) {
      this.$http
        .post(`/api/bill/downloadCenter/createYuncnBill`, {
          billDate: row.date,
          dataType: "current_member",
          billType: "settle",
          memberId: row.memberId,
        })
        .then((res) => {
          if (res.code === "0000") {
            this.$message.success("已添加到下载中心！");
          }
        });
    },
    handleClick() {
      setTabIndex(this.activeKey);
      this.resetFields();
      this.dataForm = JSON.parse(JSON.stringify(this.commandForm));
      this.handleQuery();
    },
    getList() {
      this.$http
        .post("/api/settle/collect/list", {
          ...this.setParams(),
        })
        .then((res) => {
          if (res.code === "0000") {
            this.dataList = res.data;
          }
        });
    },
    getInfo() {
      this.$http
        .post("/api/settle/collect/statistics", {
          ...this.setParams(),
        })
        .then((res) => {
          if (res.code === "0000") {
            this.info = res.data;
          }
        });
    },
    setParams() {
      console.log(this.dataForm);
      let params = {};
      if (this.dataForm.memberId == "") {
        params = {
          groupByType: this.activeKey == "1" ? "day" : "month",
          ...this.dataForm,
          memberId: getUserInfo().memberId,
        };
      } else {
        params = {
          groupByType: this.activeKey == "1" ? "day" : "month",
          ...this.dataForm,
        };
      }
      return params;
    },
    handleQuery() {
      this.getList();
      this.getInfo();
    },
  },
};
</script>

<style scoped lang="scss">
.switch {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  .switch2 {
    line-height: 32px;
  }
}
</style>
